<template>
  <section class="house-type">
    <DivShell title="房产类型">
      <div class="container">
        <div>
          <p>
            <label>房屋总数</label>
            <span>{{communityData.houseTypeTotal}}</span>
          </p>
        </div>
        <ul>
          <li v-for="(item,index) in HouseTypeList" :key="index">
            <p>
              <label>{{item.label}}</label>
              <span>{{item.value}}</span>
            </p>
            <div>
              <div :style="`width:${(item.value/communityData.houseTypeTotal)*100}%;background:${item.color};`"></div>
            </div>
          </li>
        </ul>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
export default {
  name: "HouseType",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      color:['#307FFF','#4AEBE2','#864AEB','#EB7D4A','#FFC700','#7DD346','#E431D7','#FFFFFF'],
      houseTotal:11869,
      HouseTypeList:[]
    };
  },
  computed: {
    ...mapGetters(['communityData']),
  },
  watch:{
    	communityData: {
				handler(cval, oval) {
					this.setHouseTypeList();
				},
				deep: true
			}
  },
  created(){
    this.setHouseTypeList();
  },
  mounted() {
    
  },
  methods: {
    setHouseTypeList(){
       this.HouseTypeList=[
        {
          label:'综合',
          value:this.communityData.aoiStatist.multiple,
          color:'#307FFF'
        },
        {
          label:'住宅',
          value:this.communityData.aoiStatist.house,
          color:'#4AEBE2'
        },
        {
          label:'商业',
          value:this.communityData.aoiStatist.business,
          color:'#864AEB'
        },
        {
          label:'厂房',
          value:this.communityData.aoiStatist.factoryBuilding,
          color:'#EB7D4A'
        },
        {
          label:'仓库',
          value:this.communityData.aoiStatist.store,
          color:'#FFC700'
        },
        {
          label:'办公',
          value:this.communityData.aoiStatist.office,
          color:'#7DD346'
        },
        {
          label:'公共设施',
          value:this.communityData.aoiStatist.publicFac,
          color:'#E431D7'
        },
        {
          label:'其它',
          value:this.communityData.aoiStatist.houseTypeOther,
          color:'#FFFFFF'
        },
      ]
    }
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .house-type{
    margin-bottom: 18px;
    & .container{
      &>div{
        padding-left: 49px;
        padding-right: 17px;
        box-sizing: border-box;
        height: 34px;
        line-height: 34px;
        display: flex;
        justify-content: space-between;
        background: url('../../../assets/img/legal-total.png') 4px center no-repeat;
        background-size: 28px 28px;
        margin-bottom: 18px;
        & label{
          color: #B3BBD4;
          font-size: 14px;
          margin-right: 17.5px;
        }
        & span{
          font-size: 16px;
          background: linear-gradient(to right,#03DCEF,#307FFF);
          -webkit-background-clip:text;
          color: transparent;
        }
      }
      &>ul{
        padding-left: 4px;
        padding-right: 0;
        box-sizing: border-box;
        &>li{
          margin-bottom: 20px;
          p{
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            label{
              font-size: 14px;
              color: #959DB4;
            }
            span{
              font-size: 16px;
              color: #9CA7C7;
            }
          }
          &>div{
            width: 100%;
            height: 5px;
            background-color: #283864;
            &>div{
              height: 100%;
              transition: all .8s;
            }
          }
          &:nth-last-of-type(1){
            margin-bottom: 15px;
          }
        }
      }
    }
  }
</style>
